<template>
  <div class="mod-config" style="background:#f9f9f9;">
    <div class="circle">
      <sector style="width:400px;" :key="key" :opinionData="opinionData"></sector>
    </div>
  </div>
  <!--饼状图-->
</template>

<script>
import sector from "@/components/sector.vue";
export default {
  data() {
    return {
      opinionData: [],
      key: new Date().getTime(),
    };
  },
  watch: {
    key: function () {
      this.key = new Date().getTime();
    },
  },
  components: {
    sector,
  },
  methods: {
    getCensusData() {
      this.$http({
        url: this.$http.adornUrl(`/generator/misspeople/missAgeNum`),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var ageNum = data.ageNum;
          this.opinionData = [],
          ageNum.forEach((item,index)=>{
            this.opinionData.push({
            value: item.ageNum,
            name: item.ageLevel,
            });
          })
          this.key = new Date().getTime();
        } else {
          this.$message.error("查询失踪人口数据失败,请稍后再试");
        }
      });
    },
  },
  activated() {
    this.getCensusData();
  },
};
</script>
<style scoped>
.circle{
  display:flex;
  align-items: center;
  justify-content: center;
}
</style>
